<template>
  <div>
    <OrderHeader title="购物车">
      <template v-slot:tip>
        <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
      </template>
    </OrderHeader>
    <div class="wrapper">
      <div class="container">
        <div class="cart-box">
          <ul class="cart-item-head">
            <li class="col-1">
              <span class="checkbox" @click="handleSelectedAll()" :class="{'checked': selectedAll}"></span>
              全选
            </li>
            <li class="col-3">商品名称</li>
            <li class="col-1">单价</li>
            <li class="col-2">数量</li>
            <li class="col-1">小计</li>
            <li class="col-1">操作</li>
          </ul>
          <ul class="cart-item-list">
            <li class="cart-item" :class="{'animate': animate}" v-for="item of list" :key="item.productId">
              <div class="item-check">
                <span class="checkbox" :class="{'checked': item.productSelected || checked}" @click="updateCart('checked', item)"></span>
              </div>
              <div class="item-name">
                <img v-lazy="item.productMainImage" alt="">
                <span>{{item.productSubtitle}}</span>
              </div>
              <div class="item-price">{{item.productPrice}}</div>
              <div class="item-num">
                <div class="num-box">
                  <a href="javascript:;" @click="updateCart('-', item)">-</a>
                  <span>{{item.quantity}}</span>
                  <a href="javascript:;" @click="updateCart('+', item)">+</a>
                </div>
              </div>
              <div class="item-total">{{item.productTotalPrice}}</div>
              <div class="item-del" @click="handelDeleteProduct(item.productId)"></div>
            </li>
          </ul>
        </div>
        <div class="order-wrap clearfix">
          <div class="cart-tip fl">
            <a href="/#/index">继续购物</a>
            共
            <span>{{cartTotalQuantity}}</span>
            件商品，已选择
            <span>{{checkedNum}}</span>
            件
          </div>
          <div class="total fr">
            合计：
            <span>{{cartTotalPrice}}</span>
            元
            <el-button class="btn" @click="handleOrder">去结算</el-button>
          </div>
        </div>
      </div>
    </div>
    <Servies></Servies>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import {getCart, updata, selectAll, unSelectAll, deleteProduct} from "../api/home";
import NavFooter from "../components/nav-footer";
import OrderHeader from "../components/base/OrderHeader";
import Servies from "../components/base/Servies";

export default {
  name: 'cart',
  components: {Servies, OrderHeader, NavFooter},
  data () {
    return {
      list: [],
      cartTotalPrice: '',
      cartTotalQuantity: '',
      selectedAll: false,
      checkedNum: '0',
      checked: false,
      animate: false
    }
  },
  methods: {
    /**
     * 获取购物车列表
     */
    getCartList () {
      getCart().then(res => {
        console.log(res)
        const data = res.data.data
        if (data) {
          this.renderData(data)
        }
      })
    },
    updateCart (type, item) {
      let selected = item.productSelected
      const id = item.productId
      if (type === '-') {
        if (item.quantity === 1) {
          this.$message('不能再减少啦')
          return
        }
        --item.quantity
      } else if (type === '+') {
        if (item.quantity > item.productStock) {
          this.$message('库存不够啦')
          return;
        }
        ++item.quantity
      } else {
        selected = !selected
        this.selected = !selected
      }
      updata(id, {
        quantity: item.quantity,
        selected
      }).then(res => {
        const data = res.data.data
        this.renderData(data)
      })
    },
    /**
     * 选择所有项
     */
    handleSelectedAll () {
      if (this.selectedAll) {
        unSelectAll().then(res => {
          const data = res.data.data
          this.selectedAll = false
          this.renderData(data)
        })
      } else {
        selectAll().then(res => {
          const data = res.data.data
          this.selectedAll = true
          this.renderData(data)
        })
      }
    },
    handelDeleteProduct (id) {
      deleteProduct(id).then(res => {
        this.$confirm('确定要移除该商品吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = res.data.data
          this.renderData(data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })
    },
    handleOrder () {
      const AllNoChecked = this.list.every(item => !item.productSelected)
      if (AllNoChecked) {
        this.$message('请至少选择一个商品')
      } else {
        this.$router.push('/order/confirm')
      }
    },
    renderData (data) {
      this.list = data.cartProductVoList
      this.cartTotalPrice = data.cartTotalPrice
      this.cartTotalQuantity = data.cartTotalQuantity
      this.selectedAll = data.selectedAll
      this.checkedNum = data.cartProductVoList.filter(item => item.productSelected).length
    }
  },
  mounted () {
    this.getCartList()
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/css/base";

.btn {
  width: 202px;
  height: 50px;
  background: #ff6600;
  border: none;
  outline: none;
  color: #ffffff;
}

.wrapper {
  background-color: #f5f5f5;
  padding-top: 30px;
  padding-bottom: 114px;

  .cart-box {
    background-color: #ffffff;
    font-size: 14px;
    color: #999999;
    text-align: center;

    .checkbox {
      display: inline-block;
      width: 22px;
      height: 22px;
      border: 1px solid #e5e5e5;
      vertical-align: middle;
      margin-right: 17px;
      cursor: pointer;

      &.checked {
        background: url('/imgs/icon-gou.png') #ff6600 no-repeat center;
        background-size: 16px 12px;
        border: none;
      }
    }

    .cart-item-head {
      display: flex;
      height: 79px;
      line-height: 79px;

      .col-1 {
        flex: 1;
      }

      .col-2 {
        flex: 2;
      }

      .col-3 {
        flex: 3;
      }
    }

    .cart-item-list {
      .cart-item {
        display: flex;
        align-items: center;
        height: 125px;
        border-top: 1px solid #e5e5e5;
        font-size: 16px;
        transition: .4s linear;

        &.animate {
          transform: translateX(-100%);
        }

        .item-check {
          flex: 1;
        }

        .item-name {
          flex: 3;
          font-size: 18px;
          color: #333333;
          display: flex;
          align-items: center;

          img {
            width: 80px;
            vertical-align: middle;
          }

          span {
            margin-left: 30px;
          }
        }

        .item-price {
          flex: 1;
          color: #333333;
        }

        .item-num {
          flex: 2;

          .num-box {
            display: inline-block;
            width: 150px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e5e5e5;
            font-size: 14px;

            a {
              display: inline-block;
              width: 50px;
              color: #333333;
            }

            span {
              display: inline-block;
              width: 50px;
              color: #333333;
            }
          }
        }

        .item-total {
          flex: 1;
          color: #ff6600;
        }

        .item-del {
          flex: 1;
          width: 14px;
          height: 12px;
          background: url('/imgs/icon-close.png') no-repeat center;
          background-size: contain;
          cursor: pointer;
        }
      }
    }
  }

  .order-wrap {
    font-size: 14px;
    color: #666666;
    margin-top: 20px;
    height: 50px;
    line-height: 50px;

    .cart-tip {
      margin-left: 29px;

      a {
        color: #666666;
        margin-right: 37px;
      }

      span {
        color: #ff6600;
        margin: 0 5px;
      }
    }

    .total {
      font-size: 14px;
      color: #ff6600;

      span {
        font-size: 24px;
      }

      a {
        width: 202px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        margin-left: 37px;
      }
    }
  }
}
</style>
